<template>
  <JeepayBackground :bgColorStyle="{ background: 'linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)' }">
    <view>
      <JeepayCustomNavbar title="统计报表" textColor="#fff" bgDefaultColor="linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)" backCtrl="back" />
      <!-- 统计时间选择部分 -->
      <view class="screen-time">
        <block v-for="(v, i) in screenList" :key="i">
          <view class="time-main" :class="{ 'active-screen': vdata.selected == v.value }" @tap="selectedTime(v)">{{ v.title }}</view>
        </block>
      </view>
      <template v-if="vdata.selected == 'custom'">
        <view class="time-selection time-custom">
          <image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
          <view class="selection-main" @tap="startTime.show()">{{ vdata.startTime || '请选择开始时间' }} </view>
          <view style="color: #fff">---</view>
          <view class="selection-main" @tap="endTime.show()">{{ vdata.endTime || '请选择结束时间' }}</view>
          <image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
        </view>
      </template>
      <view class="time-selection flex-center" v-else @tap="timeSelected.show()">
        <image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
        <view class="selection-main">{{ vdata.time }} <text v-if="isToDay()">今天</text></view>
        <image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
      </view>
      <!-- 统计卡片部分 -->
      <view class="stat-card">
        <view class="stat-money">
          <view class="stat-title">实收金额 (元)</view>
          <view class="stat-num-title">{{ vdata.payAmount }}</view>
          <view class="stat-tips"> <uni-icons type="help-filled" size="20" color="#c6c6c6" @tap="openTips()" /> </view>
        </view>
        <view class="stat-card-info">
          <block v-for="(v, i) in vdata.infoList" :key="i">
            <view class="stat-item">
              <view class="stat-title">{{ v.title }}</view>
              <view class="stat-num">{{ v.text }}</view>
            </view>
          </block>
        </view>
      </view>
      <!-- 统计选择门店等方式部分 -->
      <view class="stat-selection">
        <block v-for="v in vdata.statList" :key="v.value">
          <view class="stat-item" :class="{ 'active-stat': vdata.statSelected == v.value }" @tap="switchStatType(v.value)">{{ v.title }}</view>
        </block>
      </view>

      <StatInfoCard :dev="vdata.statSelected == 'device'" @sortClick="switchField" @device="switchDevType">
        <JeepayTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :searchData="params" :showListNull="false">
          <template #tableBody="{ record }">
            <statCell
              :reality="calcReality(record[vdata.cardSelected])"
              :title="record[vdata.namObj[vdata.statSelected]]"
              :money="calcData(record[vdata.cardSelected])"
              :round="vdata.cardSelected == 'round'"
              :iconPre="vdata.cardSelected == 'payAmount' || vdata.cardSelected == 'refundAmount'"
              :iconNext="vdata.cardSelected == 'round'"
              :devImage="vdata.statSelected == 'wayCodeType' ? record.wayType : vdata.statSelected == 'store' ? 'store' : record.deviceType"
              @tap="vdata.statSelected == 'wayCodeType' ? payInfo.open(params, record) : infoPopup.open(params, record)"
            >
            </statCell>
          </template>
        </JeepayTableList>
      </StatInfoCard>
      <!-- 占位 -->
      <view class="store-block"></view>
      <!-- 选择门店按钮 -->
      <view class="store-name" @tap="selectedStore">{{ vdata.store?.storeName }} <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /> </view>
      <JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
      <JTipsPopupContent ref="tips" title="统计释义" buttonText="我知道了" @cancel="vdata.flag = true">
        <block v-for="(v, i) in tipsList" :key="i">
          <view class="tips-wrapper">
            <view class="tips-title">{{ v.title }}</view>
            <view class="tips-info">{{ v.info }}</view>
          </view>
        </block>
      </JTipsPopupContent>
      <xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ymd" v-if="vdata.selected == 'date'" />
      <xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ym" v-if="vdata.selected == 'month'" />
      <xp-picker @confirm="dayConfirm" ref="timeSelected" mode="y" v-if="vdata.selected == 'year'" />
        <xp-picker ref="startTime" mode="ymd" @confirm="customTime($event, 'startTime')" />
        <xp-picker ref="endTime" mode="ymd" @confirm="customTime($event, 'endTime')" />
      <!-- 选择门店 -->

      <!-- 详情弹窗 -->
      <statInfoPopup ref="infoPopup" />
      <payInfoPopup ref="payInfo" />
    </view>
  </JeepayBackground>
</template>

<script setup>
import { onMounted, reactive, ref, getCurrentInstance, nextTick } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { startAndEndTime } from '@/commons/utils/timeInspect'
import dayjs from 'dayjs'
import { req, reqLoad, $getStatInfo, $getStatistic, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js'
import StatInfoCard from './components/StatInfoCard.vue'
import statInfoPopup from './components/statInfoPopup.vue'
import payInfoPopup from './components/payInfoPopup.vue'
// import StoreCell from './components/StoreCell.vue'
import statCell from './components/statCell.vue'

import cal from '@/commons/utils/cal.js'

// 提示框
const tips = ref(null)
// 时间选怎器
const timeSelected = ref(null)
const startTime = ref(null)
const endTime = ref(null)
// 获取表格实例
const refTable = ref(null)
// 获取门店实例
const jeepayPopupListSelect = ref(null)
const infoPopup = ref(null)
const payInfo = ref(null)
const vdata = reactive({
  selected: 'date',
  statSelected: 'store',
  payAmount: '0.00',
  originalData: {}, //原始数据 计算进度条
  infoList: [
    { title: '退款金额 (元)', money: '13.15', value: 'refundAmount' },
    { title: '退款笔数', money: '13.15', value: 'refundCount' },
    { title: '成交订单笔数', money: '13.15', value: 'payCount' },
    { title: '成交订单金额 (元)', money: '6365876.15', value: 'allAmount' },
    { title: '手续费（元）', money: '13.15', value: 'fee' },
    { title: '交易成功率', money: '98.25%', value: 'round' },
  ],
  statList: [
    { title: '门店统计', value: 'store' },
    { title: '支付方式分析', value: 'wayCodeType' },
    { title: '设备统计', value: 'device' },
  ],

  namObj: {
    store: 'storeName',
    device: 'deviceName',
    wayCodeType: 'wayTypeName',
  },
  cardSelected: 'payAmount',
  store: {
    storeId: '',
    storeName: '全部门店',
  },
})
const screenList = reactive([
  { title: '日报', value: 'date' },
  { title: '月报', value: 'month' },
  { title: '年报', value: 'year' },
  { title: '自定义', value: 'custom' },
])
const timeFormat = {
  date: 'YYYY/MM/DD',
  month: 'YYYY/MM',
  year: 'YYYY',
}
const tipsList = reactive([
  { title: '实收金额：', info: '不包含已退款金额及手续费，实收金额为商户实际到账金额。' },
  { title: '退款笔数：', info: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次。' },
  { title: '成交订单金额：', info: '支付成功的订单金额，包含部分退款及全额退款的订单。' },
  { title: '成交订单笔数：', info: '支付成功的订单笔数，包含已全额退款的订单。' },
  { title: '成功率：', info: '成交订单笔数与全部订单笔数除得的百分比。' },
])
// 选择年月日
let orgSelectedTime = undefined  
const selectedTime = (val) => {
  vdata.selected = val.value
	if(val.value != 'custom') orgSelectedTime = val.value
  if (val.value == 'custom') {
		vdata.startTime  = dayjs(vdata.time).startOf(orgSelectedTime).format(timeFormat['date'])
		vdata.endTime  = dayjs(vdata.time).endOf(orgSelectedTime).format(timeFormat['date'])
		return
	}
  dayConfirm({ value: dayjs(new Date()).format(timeFormat[vdata.selected]) })
}
const params = {
  method: 'store',
  queryDateRange: '',
  sortOrder: 'ascend', //排序默认正序
  sortField: 'payAmount', //默认字段
}
// 日报时间选择器确认
const dayConfirm = (e) => {
  vdata.time = dayjs(e.value).format(timeFormat[vdata.selected])
  params.queryDateRange = `customDateTime_${dayjs(e.value).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(e.value).endOf(vdata.selected).format('YYYY-MM-DD HH:mm:ss')}`
  nextTick(() => {
    getStatList()
    refTable.value.refTable(true)
  })
}
// 自定义时间选择器
const customTime = (e, val) => {
  vdata[val] = dayjs(e.value).format('YYYY/MM/DD')
  if (vdata.endTime) {
    if (!startAndEndTime(vdata.startTime, vdata.endTime)) return
    params.queryDateRange = `customDateTime_${dayjs(vdata.startTime).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(vdata.endTime)
      .endOf('date')
      .format('YYYY-MM-DD HH:mm:ss')}`
    getStatList()
    refTable.value.refTable(true)
  }
}
const getStatList = () => {
  $getStatInfo(params).then(({ bizData }) => {
    vdata.originalData = JSON.parse(JSON.stringify(bizData)) //储存原始数据
    bizData.refundAmount = cal.cert2Dollar(bizData.refundAmount)
    bizData.allAmount = cal.cert2Dollar(bizData.allAmount)
    bizData.fee = cal.cert2Dollar(bizData.fee)
    vdata.payAmount = cal.cert2Dollar(bizData.payAmount)
    bizData.round = bizData.round + '%'
    vdata.infoList.forEach((v) => {
      v.text = bizData[v.value]
    })
  })
}
//切换字段 切换排序
const switchField = (val) => {
  vdata.cardSelected = val.value
  params.sortOrder = val.sort
  params.sortField = val.value
  refTable.value.refTable(true)
}
const reqTableDataFunc = (params) => {
  return $getStatistic(params)
}
const openTips = () => {
  tips.value.open()
}
// 判断是不是当天
const isToDay = () => {
  return dayjs(vdata.time).format('YYYY/MM/DD') == dayjs(new Date()).format('YYYY/MM/DD')
}
// 计算进度条
const calcReality = (val) => {
  return (val / vdata.originalData[vdata.cardSelected]) * 100
}
// 计算数据需不需要除以 100
const calcData = (val) => {
  if (vdata.cardSelected == 'payAmount' || vdata.cardSelected == 'refundAmount') return cal.cert2Dollar(val)
  return val
}
const switchStatType = (val) => {
  vdata.statSelected = val
  params.method = val
 nextTick(()=>{
  refTable.value.refTable(true)
  getStatList()
 })
}
// 切换设备类型
const switchDevType = (val) => {
  params.deviceType = val
  refTable.value.refTable(true)
}
// 获取门店数据
function reqTableDataByStoreFunc(params) {
  return reqLoad.list(API_URL_MCH_STORE_LIST, params)
}
// 选择门店
const selectedStore = () => {
  jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
    if (selected) {
      vdata.store = selected
      params.storeId = selected.storeId
      getStatList()
      refTable.value.refTable(true)
    }
  })
}
// 进入页面初始化数据
onLoad(() => {
  params.queryDateRange = `customDateTime_${dayjs(new Date()).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(new Date()).endOf('date').format('YYYY-MM-DD HH:mm:ss')}`
  vdata.time = dayjs().format('YYYY/MM/DD')
  getStatList()
})
onReachBottom(() => {})
</script>

<style lang="scss" scoped>
.screen-time {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10rpx 30rpx;
  margin-top: 20rpx;
  height: 100rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 0.1);
  .time-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 20rpx;
    color: rgba(255, 255, 255, 0.75);
    font-size: 32rpx;
    font-weight: 500;
  }
  .active-screen {
    width: 171rpx;
    background-color: #fff;
    color: $J-color-t21;
  }
}
.time-selection {
  margin-bottom: 10rpx;
  height: 100rpx;
  image {
    width: 40rpx;
    height: 40rpx;
  }
  .selection-main {
    height: auto;
    margin: 0 10rpx 0 20rpx;
    font-size: 30rpx;
    color: #fff;
  }
}
.stat-card {
  position: relative;
  margin: 0 30rpx;
  background-color: $J-bg-ff;
  border-radius: $J-b-r32;
  .stat-title {
    white-space: nowrap;
    margin-bottom: 10rpx;
    font-size: 24rpx;
    color: #a6a6a6;
  }
  .stat-money {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 202rpx;
    box-shadow: 0 50rpx 70rpx -60rpx rgba(107, 130, 153, 0.2);
    .stat-num-title {
      font-size: 60rpx;
      font-weight: 700;
      color: #2980fd;
    }
  }
  .stat-card-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 68rpx 50rpx 68rpx;
    .stat-item {
      width: 175rpx;
      margin-top: 50rpx;
      text-align: center;
      .stat-num {
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }
  .stat-tips {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
  }
}
.stat-selection {
  position: sticky;
  top: 88rpx;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 46rpx;
  height: 110rpx;
  background-color: #f7f7f7;
  .stat-item {
    flex-grow: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 27rpx;
    color: $J-color-t80;
    background-color: #f7f7f7;
  }
  .active-stat {
    font-weight: 500;
    color: #2980fd;
  }
}
.tips-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50rpx;
  height: 170rpx;
  .tips-title {
    margin-bottom: 12rpx;
    font-size: 30rpx;
  }
  .tips-info {
    font-size: 26rpx;
    color: #808080;
  }
}
.store-name {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 60rpx;
  text-align: center;
  line-height: 100rpx;
  height: 100rpx;
  border-top: 1rpx solid #ededed;
  font-size: 30rpx;
  backdrop-filter: blur(20rpx);
  background-color: rgba(252, 252, 252, 0.85);
}
.store-block {
  height: 90rpx;
}
.time-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60rpx;
}
.store-name {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 60rpx;
  text-align: center;
  line-height: 100rpx;
  height: 100rpx;
  border-top: 1rpx solid #ededed;
  font-size: 30rpx;
  background-color: rgba(252, 252, 252, 0.85);
  image {
    margin-left: 10rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
